<template>
  <div class="company">
    <!-- 轮播图 -->
    <m-carousel></m-carousel>
    <!-- 公司介绍 -->
    <companyIntroduction></companyIntroduction>
    <!-- 发展历程 -->
    <v-container fluid class="mb-15 mt-10 box" ref="timeline" id="timeline">
      <v-row justify="center">
        <v-col cols="12">
          <div class="box_title">
            <div class="h2">发展历程</div>
            <div class="caption">Development history</div>
          </div>
        </v-col>
      </v-row>
      <v-row justify="center">
        <v-col cols="12">
          <v-timeline :reverse="true" :dense="$vuetify.breakpoint.smAndDown">
            <v-timeline-item
              v-for="timeline of timelineModel.list"
              :key="timeline.id"
              color="red"
              small
            >
              <template v-slot:opposite>
                <span>{{ timeline.year }}</span>
              </template>
              <v-card flat outlined>
                <v-card-title>{{ timeline.year }}</v-card-title>
                <v-card-text>
                  {{ timeline.content }}
                </v-card-text>
              </v-card>
            </v-timeline-item>
          </v-timeline>
        </v-col>
      </v-row>
    </v-container>
    <!-- 新闻中心 -->
    <v-container fluid class="mb-15 mt-10 box" id="news">
      <v-row>
        <v-col cols="12">
          <div class="box_title">
            <div class="h2">新闻中心</div>
            <div class="caption">News Center</div>
          </div>
        </v-col>
      </v-row>
      <v-row>
        <v-col cols="12" md="4" sm="6" v-for="item in news" :key="item.id">
          <v-card class="mx-auto" max-width="400" flat outlined>
            <v-img class="align-end" height="260px" :src="item.img"> </v-img>
            <v-card-title
              class="text-truncate d-block text-subtitle-1"
              :title="item.title"
            >
              {{ item.title }}
            </v-card-title>

            <v-card-subtitle class="pb-0 d-flex align-center">
              <v-icon left>mdi-clock</v-icon>
              {{ item.date }}
            </v-card-subtitle>

            <v-card-actions class="justify-end">
              <v-btn
                text
                color="#d1171e"
                :to="{ name: 'CompanyNews', params: { id: item.id } }"
              >
                查看详情
              </v-btn>
            </v-card-actions>
          </v-card>
        </v-col>
      </v-row>
    </v-container>
    <!-- 新闻弹窗 -->
    <v-dialog v-model="dialogModel.isVisible" max-width="80%">
      <v-card>
        <v-card-title class="text-h6 justify-center">
          {{ dialogModel.current.title }}
        </v-card-title>

        <v-card-subtitle class="py-4 d-flex align-center justify-center">
          <v-icon left>mdi-clock</v-icon>
          {{ dialogModel.current.date }}
        </v-card-subtitle>

        <v-card-text>
          <v-img :src="dialogModel.current.img"></v-img>
        </v-card-text>

        <v-card-text
          v-html="dialogModel.current.content"
          class="text-body-1"
        ></v-card-text>
      </v-card>
    </v-dialog>
  </div>
</template>

<script>
// 组件
import mCarousel from '@/components/common/Carousel.vue';
import companyIntroduction from './components/Introduction.vue';
// 常量
import constant from '@/const/';

export default {
  name: 'Company',
  components: {
    mCarousel,
    companyIntroduction
  },
  data() {
    return {
      timelineModel: {
        list: constant.company.timelines
      },
      dialogModel: {
        isVisible: false,
        current: {}
      }
    };
  },
  computed: {
    news() {
      return constant.company.news;
    }
  },
  mounted() {
    const { hash } = this.$route;
    if (hash !== '') {
      this.$vuetify.goTo(hash);
    }
  },
  methods: {
    handleDetail(detail) {
      this.dialogModel.current = detail;
      this.dialogModel.isVisible = true;
    }
  }
};
</script>

<style></style>
